<script type="text/template" id="move-routers-template">
    <div class="move-router">
        <p>Territoy :{{territoryName}}</p>
        <div class="customer-list">
            {{#each customers}}
            <div class="items" data-customer="{{fromateJsonString this}}" data-key="{{@index}}">{{getIndex @index}}&nbsp;&nbsp;&nbsp;{{CustName}}</div>
            {{/each}}

        </div>
        <div class="middle">>></div>
        <div class="router-list">
            {{#each routers}}
               <div class="items" data-router="{{routerId}}">{{routerName}}</div>
            {{/each}}
        </div>
        </div>
</script>

<script>
    {
        Handlebars.registerHelper("getIndex",function(value){
            return  value+1;
        });
        Handlebars.registerHelper("fromateJsonString",function(data){
            return JSON.stringify( data );
        });


        $(document).on('click','.move-router .customer-list .items',function(){
            $(this).hasClass('selected') ? $(this).removeClass('selected') : $(this).addClass('selected');
        })
        $(document).on('click','.move-router .router-list .items',function(){
            $(this).siblings().removeClass('selected');
            $(this).addClass('selected');
        })
    }
</script>